<template>
	<view class="sub-barnch-box">
		<!-- 搜索组件 -->
		<view class="sub-branch-search-box">
			<view class="sub-branch-search-title">若未查询到对应信息，请输入分行地区名称查询</view>
			<view class="sub-branch-search-content">
				<image class="search-icon" src="/static/search_icon.png" mode="aspectFit"></image>
				<input class="search-input" type="text" placeholder="请输入支行名称" placeholder-class="search-input-placeholder" v-model="keyword" @blur="searchAction" />
			</view>
		</view>
		<!-- 支行列表 -->
		<view class="sub-barnch-list">
			<view class="sub-barnch-item" v-for="(item,index) in dataList" :key="index" @tap="selectSubBarnch(item)">
				<text class="sub-barnch-name">{{item.bankName}}</text>
				<image class="sub-barnch-right-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
				<view class="sub-barnch-line"></view>
			</view>
		</view>
		<view style="padding-bottom: 30rpx;">
			<u-loadmore :status="loadStatus" :fontSize="14" :iconSize="16" loadingIcon="semicircle" loadmoreText="点击或上拉加载更多" :nomoreText="nomoreText" v-if="dataList.length > 0" @loadmore="loadData(false)"></u-loadmore>
		</view>
		
	</view>
</template>

<script setup>
	import { onLoad,onReachBottom} from '@dcloudio/uni-app'
	import { ref, toRef } from 'vue'
	import { useFormStore } from '@/stores'
	import { getSubBrachList } from '@/config/api.js'
	import { kFirstPage, kPageCount } from '@/config/config'
	
	const formStore = useFormStore()
	// 搜索关键词
	const keyword = ref('')
	//支行列表数据
	const dataList = ref([])
	//当前页
	const page = ref(1)
	//上拉加载状态
	const loadStatus = ref('loadmore')
	//没有更多数据提示
	const nomoreText = ref('没有更多数据了')
	//选择支行
	const selectSubBarnch = (item) => {
		formStore.bankName = item.bankName
		formStore.bankNo = item.bankNo
		uni.navigateBack()
	}
	// 搜索
	const searchAction = () => {
		loadData()
	}
	//页面加载时
	onLoad(()=>{
		loadData()
	})
	//上拉加载
	onReachBottom(()=>{
		if(loadStatus.value == 'nomore'){
			return
		}
		loadStatus.value = 'loading'
		loadData(false)
	})
	//加载数据
	const loadData = (isRefresh = true) => {
		let currentPage = page.value
		if (isRefresh) {
			currentPage = 1
		} else {
			currentPage = page.value + 1
		}
		let params = {}
		params.keyword = keyword.value
		if(!uni.$u.test.isEmpty(formStore.branchBankName)){
			params.bankName = formStore.branchBankName
		}
		if(uni.$u.test.isEmpty(formStore.cityCode)){
			params.provinceName = formStore.provinceName
		}
		else{
			params.provinceName = formStore.provinceName
			params.cityName = formStore.cityName
		}
		params.pageSize = currentPage
		getSubBrachList(params).then(res=>{
			const totalpage = res.result.totalpage
			loadStatus.value = currentPage >= totalpage ? 'nomore' : 'loadmore'
			if(isRefresh){
				dataList.value = []
				page.value = kFirstPage
				dataList.value = res.result.bankInfo
			}
			else{
				page.value = currentPage
				dataList.value = [...dataList.value,...res.result.bankInfo]
			}
		}).catch(()=>{
			loadStatus.value = 'loadmore'
		})
	}
</script>

<style lang="scss" scoped>
	.sub-barnch-box {
		.sub-branch-search-box {
			background-color: $xh-bg-color;
			height: 202rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.sub-branch-search-title {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				color: $xh-subtitle-color;
			}

			.sub-branch-search-content {
				display: flex;
				align-items: center;
				height: 72rpx;
				background-color: white;
				border-radius: 36rpx;
				border: 1px solid #cecece;
				padding: 0 30rpx;

				.search-icon {
					width: 48rpx;
					height: 48rpx;
					flex-shrink: 0;
				}

				.search-input {
					font-size: 28rpx;
					flex: 1;
					margin-left: 20rpx;
				}

				.search-input-placeholder {
					color: #ccc;
				}
			}
		}

		.sub-barnch-list {
			background-color: white;
			.sub-barnch-item {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				position: relative;

				.sub-barnch-right-icon {
					width: 24rpx;
					height: 24rpx;
					margin-left: auto;
					flex-shrink: 0;
				}

				.sub-barnch-name {
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					margin-right: 30rpx;
				}

				.sub-barnch-line {
					position: absolute;
					left: 30rpx;
					right: 0;
					bottom: 0;
					height: 1px;
					transform: scaleY(0.5);
					background-color: $xh-line-color;
				}
			}
		}

	}
</style>